import MockList from '@/components/MockList';
import PolarImage from '@/components/PolarImage';
import ZhexianImage from '@/components/ZhexianImage';
import { CACHE_KEY, DATA_FORMAT, setCacheByKey } from '@/utils';
import { PlusCircleFilled, UserOutlined } from '@ant-design/icons';
import { Avatar, Button, Card, Col, Collapse, Empty, Input, Row, Select, Tabs, Tag } from 'antd';
import dayjs from 'dayjs';
import { cloneDeep } from 'lodash';
import { useState } from 'react';
import PolarImage2 from '../PolarImage2';
import PolarImage3 from '../PolarImage3';

const Risk = ({ data, setList }) => {
  const [talkingEditing, setTalkingEditing] = useState(0);
  const [talkingContent, setTalkingContent] = useState('');

  const talkingsWithAdpter = (_) => {
    const talkings = cloneDeep(_?.talkings);
    const data = talkings?.reverse()?.map((item, index) => {
      return {
        key: index,
        label: item.time,
        children: <pre>{item.content}</pre>,
      };
    });
    return data;
  };

  const nTalkings = talkingsWithAdpter(data);

  const handleAddTalking = () => {
    if (talkingEditing === 0) {
      setTalkingEditing(1);
      return;
    }

    if (talkingEditing === 1) {
      const list = setCacheByKey(CACHE_KEY.PRISION_LIST, (item) => item.name === data.name, {
        talkings: [
          ...(data?.talkings || []),
          {
            key: (data?.talkings || []).length,
            time: dayjs().format(DATA_FORMAT),
            content: talkingContent,
          },
        ],
      });
      console.log('😈list', list);
      setList(list);
      setTalkingEditing(0);
    }
  };

  return (
    <div>
      <Row gutter={20}>
        <Col span={3}>
          <Avatar shape="square" size={128} icon={<UserOutlined />} />
          <div className="label mt10">人员编号：{data?.id || '暂无'}</div>
        </Col>
        <Col span={11}>
          <div className="label">姓名：{data?.name || '暂无'}</div>
          <div className="label">年龄：{data?.age || '暂无'}</div>
          <div className="label">位置：{data?.position || '暂无'}</div>
          <div className="label">犯罪类型：{data?.type || '暂无'}</div>
          <div className="label">案件进度：{data?.progress || '暂无'}</div>
          <div className="label">入所时间：{data?.enter_time || '暂无'}</div>
        </Col>
        <Col span={10}>
          <Row gutter={10} className="w100">
            <Col span={7}>
              <Card title="身体状态" className="w100">
                <h1>病号</h1>
              </Card>
            </Col>
            <Col span={9}>
              <Card title="当前状态">
                <h1>{data?.status}</h1>
              </Card>
            </Col>
            <Col span={8}>
              <Card title="风险系数" bodyStyle={{ backgroundColor: 'orange' }}>
                <h1>88</h1>
                <div>二级风险</div>
              </Card>
            </Col>
          </Row>
        </Col>
      </Row>

      <Tabs>
        <Tabs.TabPane tab="谈话记录" key={'6'}>
          {talkingEditing === 0 && (
            <div className="pointer flex-center pad20 mb10">
              <PlusCircleFilled
                style={{ fontSize: 50 }}
                onClick={handleAddTalking}
              ></PlusCircleFilled>
            </div>
          )}

          <div
            className="flex w100"
            style={{
              gap: 10,
            }}
          >
            {talkingEditing === 1 && (
              <div style={{ minWidth: 400, width: 400 }}>
                <Select
                  style={{ width: 300 }}
                  placeholder="请选择谈话类型"
                  className="mb10"
                  onChange={(e) => {
                    console.log(e);
                    if (e === '出所前谈话') {
                      setTalkingContent(`民警：出来后有什么打算？
嫌疑人A：
民警：你对自己的远景抱有乐观态度还是消极态度？
嫌疑人A：
民警：在所内时间最深有感想的是什么事情？
嫌疑人A：
                      `);
                    }
                  }}
                >
                  <Select.Option value="新收押人员入所">新收押人员入所</Select.Option>
                  <Select.Option value="诉讼环节发生变化">诉讼环节发生变化</Select.Option>
                  <Select.Option value="思想不稳定、表现异常">思想不稳定、表现异常</Select.Option>
                  <Select.Option value="家庭发生变故">家庭发生变故</Select.Option>
                  <Select.Option value="被加戴械具、处罚">被加戴械具、处罚</Select.Option>
                  <Select.Option value="调换监室的">调换监室的</Select.Option>
                  <Select.Option value="要求反映监室动态">要求反映监室动态</Select.Option>
                  <Select.Option value="出所前谈话">出所前谈话</Select.Option>
                </Select>

                <div className="mb10">
                  谈话录像及录音 <Tag color="green">已开启</Tag>
                  自动语音识别 <Tag color="red">未开启</Tag>
                </div>

                <div className="flex-center mb10">
                  <Input.TextArea
                    value={talkingContent}
                    rows={20}
                    onChange={(e) => {
                      setTalkingContent(e.target.value);
                    }}
                  />
                  <div className="mt10 w100 nowrap">
                    <div> 综合评估：</div>
                    <Select className="mt10 w100">
                      <Select.Option value="平稳">平稳</Select.Option>
                      <Select.Option value="易怒">易怒</Select.Option>
                      <Select.Option value="悲哀">悲哀</Select.Option>
                      <Select.Option value="消极">消极</Select.Option>
                    </Select>
                    {/* <Input className="mt10" placeholder="请输入"></Input> */}
                  </div>
                  <Button.Group>
                    <Button className="mt20" type="primary" onClick={handleAddTalking}>
                      填写完毕
                    </Button>
                    <Button
                      className="mt20"
                      onClick={() => {
                        setTalkingEditing(0);
                      }}
                    >
                      取消
                    </Button>
                  </Button.Group>
                </div>
              </div>
            )}
            {talkingEditing === 0 && !data?.talkings && <Empty description="暂无"></Empty>}
            {data?.talkings && <Collapse items={nTalkings} className="flex-1" />}
          </div>
        </Tabs.TabPane>
        <Tabs.TabPane tab="案情进度" key={'7'}></Tabs.TabPane>
        <Tabs.TabPane tab="风险评估" key={'1'}>
          <Row>
            <Col span={8}>
              <h2 className="text-center">自然特征分析</h2>
              <PolarImage container={'polar1'}></PolarImage>
            </Col>
            <Col span={8}>
              <h2 className="text-center">心理特征分析</h2>
              <PolarImage2 container={'polar2'}></PolarImage2>
            </Col>
            <Col span={8}>
              <h2 className="text-center">风险类型分析</h2>
              <PolarImage3 container={'polar3'}></PolarImage3>
            </Col>
          </Row>

          <h2 className="text-center">风险指数趋势</h2>
          <ZhexianImage container={'zhexian1'}></ZhexianImage>
        </Tabs.TabPane>
        <Tabs.TabPane tab="事件记录" key={'2'}>
          <MockList title="2024-04-04" desc="xxx违规"></MockList>
        </Tabs.TabPane>
        <Tabs.TabPane tab="岗位评估" key={'3'}>
          <MockList title="2024-04-04" desc="医生评估："></MockList>
          <MockList title="2024-04-04" desc="管教谈话："></MockList>
        </Tabs.TabPane>
        <Tabs.TabPane tab="购买记录" key={'4'}></Tabs.TabPane>
        <Tabs.TabPane tab="考评记录" key={'5'}></Tabs.TabPane>
        <Tabs.TabPane tab="医疗记录" key={'11'}></Tabs.TabPane>
      </Tabs>
    </div>
  );
};

export default Risk;
